<!doctype html>
<html lang="en" data-color-scheme="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Cesium Demo</title>
    <script>
      if (window.location.protocol === "file:") {
        if (
          // eslint-disable-next-line no-alert
          window.confirm(
            "You must host this app on a web server.\nSee contributor's guide for more info?",
          )
        ) {
          window.location =
            "https://github.com/CesiumGS/cesium/blob/main/Documentation/Contributors/BuildGuide/README.md#quickstart";
        }
      }
    </script>
    <link
      rel="stylesheet"
      href="__CESIUM_BASE_URL__/Widgets/widgets.css"
      vite-ignore
    />
    <link
      rel="stylesheet"
      href="__CESIUM_BASE_URL__/Widgets/lighter.css"
      vite-ignore
    />
    <style>
      /*
      * Minimal styles copied from the bucket.css stylesheet to avoid FOUC and reflow
      */
      html {
        height: 100%;
      }

      body {
        font-family: sans-serif;
        font-size: 9pt;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        /* Matches --stratakit-color-text-neutral-primary */
        color: oklch(99.06% 0.002 247.84);

        /* Matches --stratakit-color-border-neutral-muted */
        --ring-color: oklch(32.63% 0.014 268.32);
        /* Matches --stratakit-color-bg-page-depth */
        --bg-dark: oklch(22.52% 0.005 268.32);
        /* Matches --stratakit-color-bg-path-base */
        --bg-lighter: oklch(24.37% 0.006 268.32);

        --_rings: repeating-radial-gradient(
          circle at center,
          var(--ring-color) 1px,
          var(--ring-color) 3px,
          transparent 3px,
          transparent 25px
        );
        --_gradient: linear-gradient(
          180deg,
          var(--bg-lighter) 0%,
          var(--bg-dark) 100%
        );

        background-image: var(--_rings), var(--_gradient);
      }

      #loadingOverlay {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.9;
        width: 100%;
        height: 100%;
        display: none;
      }

      #loadingOverlay h1 {
        text-align: center;
        position: relative;
        top: 50%;
        margin-top: -0.5em;
        font-size: 2em;
        font-weight: bold;
      }

      .sandcastle-loading #loadingOverlay {
        display: block;
      }

      .sandcastle-loading #toolbar {
        display: none;
      }
    </style>
    <script type="module">
      import { unstable_loadStyles } from "@stratakit/foundations";

      unstable_loadStyles(document);
    </script>
    <link rel="stylesheet" href="/styles/stratakit-mimic/styles.css" />
    <script>
      window.CESIUM_BASE_URL = "__CESIUM_BASE_URL__";
    </script>
  </head>
  <body class="sandcastle-loading">
    <script
      type="text/javascript"
      src="../Sandcastle-client.js"
      vite-ignore
    ></script>
  </body>
</html>
